<template>
  <div>
    <el-col :span="24">

      <el-row>
        <div align="center"><h1>密码生成页面</h1></div>
      </el-row>

      <el-row>
        <el-col :span="2"><div class="grid-content">&nbsp;</div></el-col>
        <el-col :span="4"><div class="grid-content">
          <h2>1.密码信息</h2></div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="2"><div class="grid-content">&nbsp;</div></el-col>
        <el-col :span="20"><div class="grid-content">
          <h4>可输入多个密码，每行一个（该用户存在多个密钥的话，使用最新的生成密码）:</h4></div>
        <el-input  type="textarea" v-model="image"  rows="6"  placeholder="password1
password2
password3"></el-input>


          <!-- <el-input  v-model="image" placeholder="请输入内容" /> -->
          <br><br>
          <el-button type="primary" style="width:20%" icon="el-icon-top" @click="sumbit">提交加密</el-button>
          <br><br>

          <div v-show="play" v-highlight>
            <pre><code class="javascript" v-html="message2" /></pre>
          </div>

        </el-col>
      </el-row>



    </el-col>
  </div>

</template>

<script>
import { generatepassword } from '@/api/query'

export default {
  data() {
    return {
      options: [{
        value: '1',
        label: '数据加载中请稍后'
      }],
      value: '',
      image: '',
      message2: '',
      play: false,
    }
  },
  created() {
    // this.MopoPodList()
  },
  computed:{
        GetUser(){
            console.log(this.$store.state.user.token)
            return this.$store.state.user.token
        }
    },
  methods: {
    sumbit() {
      this.play = true
      generatepassword({ 'name': this.GetUser, 'text': this.image }).then(response => {
        console.log(response.data)
        this.message2 = response.data
        // this.value= response.data.podname
      })
    },
  }
}
</script>

<style scoped>
.el-col {
  min-height: 1px
}
</style>
